<template>
  <div class="" @click="OPEN">
    <!-- 头部 -->
    <AppHeader  @isShow="isShow"></AppHeader>
    <!-- 搜索  -->
    <AppInput></AppInput>
    <!-- 内容 -->
    <AppList></AppList>
    <!-- 遮罩 -->
    <transition name="fade">
      <!-- 谁写了v-if 给谁加动画  让谁显示给谁加动画 -->
      <AppMask v-if="flag"></AppMask>
    </transition>
  </div>
</template>

<script>
import AppHeader from "../components/appHeader.vue";
import AppInput from "../components/appInput.vue";
import AppList from "../components/appList.vue";
import AppMask from "../components/appMask.vue";
import { ref } from "vue";
export default {
  setup() {
    // 弹框的状态
    let flag = ref(false);

    // 显示隐藏弹框的状态
    function isShow() {
      flag.value = true;
      console.log(1);
    }
    // 点击其他地方隐藏弹框
    function OPEN() {
      flag.value = false;
    }
    return { flag, isShow, OPEN };
  },

  components: { AppHeader, AppInput, AppList, AppMask },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-100%);
}
</style>
